<html>
<head>
    <title>用户登录</title>
    <link rel="stylesheet" type="text/css" href="/site/css/login.css">
    <link rel="stylesheet" href="/assets/fontawesome-free-5.15.4/css/all.min.css">
    <link rel="stylesheet"  href="/assets/element-plus/index.css">
</head>
<body>
<div id="app">
    <div class="login-container">
        <h2>用户登录</h2>
        <form @submit.prevent="handleSubmit">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" v-model="username"  >
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" v-model="password" >
            </div>
            <div class="form-group">
                <input type="submit" value="登录">
            </div>

        </form>
        <a href="/reader/list" class="level-2">不登录,仅进入读者列表</a>
        <p v-if="loginError" style="color: red;">{{ loginError }}</p>
    </div>
</div>
<!-- 引入 Vue 3 -->
<!-- 引入 Vue -->
<script src="/assets/vue/vue3.min.js"></script>
<script src="/assets/element-plus/index.full.js"></script>
<script src="/assets/axios/axios.min.js"></script>
<script src="/site/js/tools/notification.js"></script>
<script src="/site/js/tools/axios-instance.js"></script>
<script>
    // 导入 Vue 的核心函数以及生命周期钩子和响应式引用
    const {createApp, ref} = Vue;
    // 创建 Vue 应用
    const app = createApp({
        setup() {
            const username = ref('admin');
            const password = ref('11');
            const loginError = ref('');



            const handleSubmit = () => {



                loginError.value = '';
                if (!username.value || !password.value) {
                    loginError.value = '用户名或密码不能为空';
                    return;
                }

                // 清空之前的错误信息
                loginError.value = '';
                let loginInfo = {
                    username: username.value,
                    password: password.value
                }
                axiosInstance.post('/api/login', loginInfo)
                    .then(response => {
                        localStorage.setItem('user', JSON.stringify(response.data));
                        message.success('用户登录成功', response.data);

                        setTimeout(() => {
                            window.location.href = '/book/list';
                        }, 500);
                    })
                    .catch(error => {
                        // 处理错误的处理
                        loginError.value = '登录失败，请检查用户名和密码';
                        // message.error('登录失败，请检查用户名和密码');
                    });
            };

            return {username, password, loginError, handleSubmit};
        }
    });
    app.mount('#app');
</script>
</body>
</html>